// JavaScript Document
var indexTrangTri = 0;
	var indexMau = 0;
	var loaiMau = 0; //0:Nam 1:Nu;
	var flag = 0;
	var srcMauChinh = "img/TrangThietKe/Mau/Nam1.png";
	var arrSrcMau = new Array();
	arrSrcMau = arrSrcMauNam;
		
	var arrTrangTri = new Array(4);
	arrTrangTri[0] = new MyImage();
	arrTrangTri[1] = new MyImage();
	arrTrangTri[2] = new MyImage();
	arrTrangTri[3] = new MyImage();
	var textAdd = new MyText();
	var arrColor = new Array("red","black","yellow","blue");
	var arrSize = new Array("14px","16px","18px","20px");
	////////////////////////////////////////////////////
	
	////////////////////////////////////////////////////////
	$(document).ready(function() {
	    init();
	    LoadPage();
	    LoadTrangTri();
	    LoadMau();
	    EventDoiMauChinh();
	    $("#khungmauchinh-mauchinh").css("background", "url(" + srcMauChinh + ")");
	    $("#btnAddText").click(function() {
	        textAdd.text = $("#textAdd").attr("value");
	        $("#add-text").text(textAdd.text);

	        $("#add-text").css("font-size", arrSize[$("#sizeAddText").attr("value")]);
	        $("#add-text").css("color", arrColor[$("#colorAddText").attr("value")]);
	        textAdd.color = arrColor[$("#colorAddText").attr("value")];
	        textAdd.size = arrSize[$("#sizeAddText").attr("value")];
	        //	alert(arrColor[$("#sizeAddText").attr("value")]);
	        //	$("#add-text").css("color","red");
	        $("#add-dichchuyen-5").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
	        $('#add-dichchuyen-5').bind('dragstop', function(event, ui) {
	            textAdd.y = ui.position.top;
	            textAdd.x = ui.position.left;
	        });
	        textAdd.status = 1;
	    });
	    $("#btnSave").click(function() {
	        Save();
	        $("#frmTruyenDuLieu").submit();
	    });
	    $("#btnUpdate").click(function() {
	        if ($("#nameFile").attr("value") != 0) {
	            Save();
	            $("#frmTruyenDuLieu").submit();
	        }
	    });

	    $("#btnNew").click(function() {
	        window.location = "Design.aspx";
	    });
	    $("#btnLoad").click(function() {
	        window.location = "Design.aspx?MaTK=" + $("#loadThietKe").attr("value");
	    });
	    $("#xuong").click(function() {
	        if (indexMau + 4 < arrSrcMau.length) {
	            indexMau = indexMau + 4;
	            LoadMau();
	        }
	    });
	    $("#len").click(function() {
	        if (indexMau - 4 > 0)
	            indexMau = indexMau - 4;
	        else
	            indexMau = 0;
	        LoadMau();
	    });
	    $("#next").click(function() {
	        if (indexTrangTri + 8 < arrSrcTrangTri.length) {
	            indexTrangTri = indexTrangTri + 8;
	            LoadTrangTri();
	        }
	    });
	    $("#forward").click(function() {
	        if (indexTrangTri - 8 > 0)
	            indexTrangTri = indexTrangTri - 8;
	        else
	            indexTrangTri = 0;
	        LoadTrangTri();
	    });
	    $("#trangTri1").click(function() {
	        //	$("#containment-wrapper").append($("#add1"));
	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri1").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri1").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri1").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri1").attr("src"));
	        //srcMauChinh = $("#trangTri1").attr("src");	
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri2").click(function() {
	        //	$("#containment-wrapper").append($("#add1"));
	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri2").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri2").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri2").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri2").attr("src"));
	        //srcMauChinh = $("#trangTri1").attr("src");		
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri3").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri3").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri3").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri3").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri3").attr("src"));
	        //srcMauChinh = $("#trangTri1").attr("src");		
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri4").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri4").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri4").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri4").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri4").attr("src"));
	        //srcMauChinh = $("#trangTri1").attr("src");		
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri5").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri5").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri5").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri5").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri5").attr("src"));
	        //srcMauChinh = $("#trangTri1").attr("src");		
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri6").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri6").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri6").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri6").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri6").attr("src"));

	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri7").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri7").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri7").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri7").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri7").attr("src"));
	        AddEvent();
	        flag = flag + 1;
	    });
	    $("#trangTri8").click(function() {

	        if (flag == 0)
	            $("#add-trangtri-1").attr("src", $("#trangTri8").attr("src"));
	        if (flag == 1)
	            $("#add-trangtri-2").attr("src", $("#trangTri8").attr("src"));
	        if (flag == 2)
	            $("#add-trangtri-3").attr("src", $("#trangTri8").attr("src"));
	        if (flag == 3)
	            $("#add-trangtri-4").attr("src", $("#trangTri8").attr("src"));
	        AddEvent();
	        flag = flag + 1;
	    });
	});
	
	function MyImage(){
		this.height = 40;
		this.width = 30;
		this.x = 0;
		this.y = 0;
		this.status = 0; //1: avalable 
		this.src = "";
	}
	function MyText(){
		this.text = "";
		this.x = 0;
		this.y = 0;
		this.size = "";
		this.color = "";
		this.status = 0; //1: avalable 
	}
	function LoadPage(){
		var i = 0;
		var strTemp = "";
		for(i = 0; i < arrLoadThietKe.length; i++){
		    strTemp += "<option value=\"" + arrLoadThietKe[i] + "\">" + arrLoadThietKe[i] + "</option>";
		//	alert("<option value=\""+i+"\">"+arrLoadThietKe[i]+"</option>");
		}
		$("#loadThietKe").html(strTemp);
		if(arrTrangTri[0].status!=0){
			
			$("#add-dichchuyen-1").animate({ top:"+="+arrTrangTri[0].y+"px" }, 3000);
			$("#add-dichchuyen-1").animate({ left:"+="+arrTrangTri[0].x+"px" }, 3000);
			$("#add-trangtri-1").attr("src",arrTrangTri[0].src);
			$("#add-trangtri-1").attr("height",arrTrangTri[0].height);
			$("#add-trangtri-1").attr("width",arrTrangTri[0].width);
			$("#add-trangtri-1").show();
			//Event
			$("#add-dichchuyen-1").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-1').bind('dragstop', function(event, ui) {
					arrTrangTri[0].y = ui.position.top;		
					arrTrangTri[0].x = ui.position.left;
				});
			$("#add-trangtri-1").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[0].height = ui.size.height;
						arrTrangTri[0].width = ui.size.width;
					
					}				
			});
			
		}
		if(arrTrangTri[1].status!=0){
			$("#add-dichchuyen-2").animate({ top:"+="+arrTrangTri[1].y+"px" }, 3000);
			$("#add-dichchuyen-2").animate({ left:"+="+arrTrangTri[1].x+"px" }, 3000);
			$("#add-trangtri-2").attr("src",arrTrangTri[1].src);
			$("#add-trangtri-2").attr("height",arrTrangTri[1].height);
			$("#add-trangtri-2").attr("width",arrTrangTri[1].width);
			$("#add-trangtri-2").show();
			$("#add-dichchuyen-2").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-2').bind('dragstop', function(event, ui) {
					arrTrangTri[1].y = ui.position.top;		
					arrTrangTri[1].x = ui.position.left;
				});
				$("#add-trangtri-2").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[1].height = ui.size.height;
						arrTrangTri[1].width = ui.size.width;
					
					}				
				});
		}
		if(arrTrangTri[2].status!=0){
			$("#add-dichchuyen-3").animate({ top:"+="+arrTrangTri[2].y+"px" }, 3000);
			$("#add-dichchuyen-3").animate({ left:"+="+arrTrangTri[2].x+"px" }, 3000);
			$("#add-trangtri-3").attr("src",arrTrangTri[2].src);
			$("#add-trangtri-3").attr("height",arrTrangTri[2].height);
			$("#add-trangtri-3").attr("width",arrTrangTri[2].width);
			$("#add-trangtri-3").show();
			
			$("#add-dichchuyen-3").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-3').bind('dragstop', function(event, ui) {
					arrTrangTri[2].y = ui.position.top;		
					arrTrangTri[2].x = ui.position.left;
				});
				$("#add-trangtri-3").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[2].height = ui.size.height;
						arrTrangTri[2].width = ui.size.width;
					
					}				
				});
		}
		if(arrTrangTri[3].status!=0){
			$("#add-dichchuyen-4").animate({ top:"+="+arrTrangTri[3].y+"px" }, 3000);
			$("#add-dichchuyen-4").animate({ left:"+="+arrTrangTri[3].x+"px" }, 3000);
			$("#add-trangtri-4").attr("src",arrTrangTri[3].src);
			$("#add-trangtri-4").attr("height",arrTrangTri[3].height);
			$("#add-trangtri-4").attr("width",arrTrangTri[3].width);
			$("#add-trangtri-4").show();
			
			$("#add-dichchuyen-4").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-4').bind('dragstop', function(event, ui) {
					arrTrangTri[3].y = ui.position.top;		
					arrTrangTri[3].x = ui.position.left;
				});
				$("#add-trangtri-4").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[3].height = ui.size.height;
						arrTrangTri[3].width = ui.size.width;
					
					}				
				});
		}
		if(textAdd.status!=0){
			$("#add-dichchuyen-5").animate({ top:"+="+textAdd.y+"px" }, 3000);
			$("#add-dichchuyen-5").animate({ left:"+="+textAdd.x+"px" }, 3000);
			$("#add-text").text(textAdd.text);
			$("#add-text").css("font-size",textAdd.size);
			$("#add-text").css("color",textAdd.color);
			$("#add-trangtri-5").show();
			
			$("#add-dichchuyen-5").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
			$('#add-dichchuyen-5').bind('dragstop', function(event, ui) {
				textAdd.y = ui.position.top;		
				textAdd.x = ui.position.left;
			});
		}
	}
	function Save(){
	    var i = 0;
	    //luu mau
	    $("#mau-chinh-src").attr("value", srcMauChinh);
	    //color
	    //size
	    $("#mau-chinh-size").attr("value", $("#SizeAo").attr("value"));
	    //image
 /*       for (i = 0; i < 4; i++) {
	        var j = i + 1;
	        $("#trang-tri-" + j + "-status").attr("value", arrTrangTri[i].status);
	        $("#trang-tri-" + j + "-src").attr("value", arrTrangTri[i].src);
	        $("#trang-tri-" + j + "-height").attr("value", arrTrangTri[i].height);
	        $("#trang-tri-" + j + "-width").attr("value", arrTrangTri[i].width);
	        $("#trang-tri-" + j + "-x").attr("value", arrTrangTri[i].x);
	        $("#trang-tri-" + j + "-y").attr("value", arrTrangTri[i].y);
	    }
	*/
	    $("#trang-tri-1-status").attr("value", arrTrangTri[0].status);
	    $("#trang-tri-1-src").attr("value", arrTrangTri[0].src);
	    $("#trang-tri-1-height").attr("value", arrTrangTri[0].height);
	    $("#trang-tri-1-width").attr("value", arrTrangTri[0].width);
	    $("#trang-tri-1-x").attr("value", arrTrangTri[0].x);
	    $("#trang-tri-1-y").attr("value", arrTrangTri[0].y);

	    $("#trang-tri-2-status").attr("value", arrTrangTri[1].status);
	    $("#trang-tri-2-src").attr("value", arrTrangTri[1].src);
	    $("#trang-tri-2-height").attr("value", arrTrangTri[1].height);
	    $("#trang-tri-2-width").attr("value", arrTrangTri[1].width);
	    $("#trang-tri-2-x").attr("value", arrTrangTri[1].x);
	    $("#trang-tri-2-y").attr("value", arrTrangTri[1].y);

	    $("#trang-tri-3-status").attr("value", arrTrangTri[2].status);
	    $("#trang-tri-3-src").attr("value", arrTrangTri[2].src);
	    $("#trang-tri-3-height").attr("value", arrTrangTri[2].height);
	    $("#trang-tri-3-width").attr("value", arrTrangTri[2].width);
	    $("#trang-tri-3-x").attr("value", arrTrangTri[2].x);
	    $("#trang-tri-3-y").attr("value", arrTrangTri[2].y);

	    $("#trang-tri-4-status").attr("value", arrTrangTri[3].status);
	    $("#trang-tri-4-src").attr("value", arrTrangTri[3].src);
	    $("#trang-tri-4-height").attr("value", arrTrangTri[3].height);
	    $("#trang-tri-4-width").attr("value", arrTrangTri[3].width);
	    $("#trang-tri-4-x").attr("value", arrTrangTri[3].x);
	    $("#trang-tri-4-y").attr("value", arrTrangTri[3].y);     
	    //text
	    $("#trang-tri-5-status").attr("value", textAdd.status);
	    $("#trang-tri-5-text").attr("value", textAdd.text);
	    $("#trang-tri-5-size").attr("value", textAdd.size);
	    $("#trang-tri-5-color").attr("value", textAdd.color);
	    $("#trang-tri-5-x").attr("value", textAdd.x);
	    $("#trang-tri-5-y").attr("value", textAdd.y);
	 
	}
	function LoadMau(){
		var i = indexMau;
		if(i<arrSrcMau.length){
			$("#mau1").attr("src",arrSrcMau[i]);
			$("#mau1").show();
		}	
		else
			$("#mau1").hide();
		i=i+1;
		
		if(i<arrSrcMau.length){
			$("#mau2").attr("src",arrSrcMau[i]);
			$("#mau2").show();
		}	
		else
			$("#mau2").hide();
		i=i+1;
		
		if(i<arrSrcMau.length){
			$("#mau3").attr("src",arrSrcMau[i]);
			$("#mau3").show();
		}	
		else
			$("#mau3").hide();
		i=i+1;
		
		if(i<arrSrcMau.length){
			$("#mau4").attr("src",arrSrcMau[i]);
			$("#mau4").show();
		}	
		else
			$("#mau4").hide();
		i=i+1;		
	}
	function LoadTrangTri(){
		var i = indexTrangTri;
		if(i<arrSrcTrangTri.length){
			$("#trangTri1").attr("src",arrSrcTrangTri[i]);
			$("#trangTri1").show();
		}
		else
			$("#trangTri1").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri2").attr("src",arrSrcTrangTri[i]);
			$("#trangTri2").show();
		}
		else
			$("#trangTri2").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri3").attr("src",arrSrcTrangTri[i]);
			$("#trangTri3").show();
		}
		else
			$("#trangTri3").hide();
		i=i+1;
		
		if(i<arrSrcTrangTri.length){
			$("#trangTri4").attr("src",arrSrcTrangTri[i]);
			$("#trangTri4").show();
		}
		else
			$("#trangTri4").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri5").attr("src",arrSrcTrangTri[i]);
			$("#trangTri5").show();
		}
		else
			$("#trangTri5").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri6").attr("src",arrSrcTrangTri[i]);
			$("#trangTri6").show();
		}
		else
			$("#trangTri6").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri7").attr("src",arrSrcTrangTri[i]);
			$("#trangTri7").show();
		}
		else
			$("#trangTri7").hide();
		i=i+1;
		if(i<arrSrcTrangTri.length){
			$("#trangTri8").attr("src",arrSrcTrangTri[i]);
			$("#trangTri8").show();
		}
		else
			$("#trangTri8").hide();
			
	}
	function EventDoiMauChinh(){
		$("#nam").css("color","red");
		$("#mau1").click(function(){
			 $("#khungmauchinh-mauchinh").css("background","url("+$("#mau1").attr("src")+")");
			 srcMauChinh = $("#mau1").attr("src");
		});	
		$("#mau2").click(function(){
			 $("#khungmauchinh-mauchinh").css("background","url("+$("#mau2").attr("src")+")");
			 srcMauChinh = $("#mau2").attr("src");
		});	
		$("#mau3").click(function(){
			 $("#khungmauchinh-mauchinh").css("background","url("+$("#mau3").attr("src")+")");
			 srcMauChinh = $("#mau3").attr("src");
		});	
		$("#mau4").click(function(){
			 $("#khungmauchinh-mauchinh").css("background","url("+$("#mau4").attr("src")+")");
			 srcMauChinh = $("#mau4").attr("src");
		});	
		
		$("#nam").click(function(){
			arrSrcMau = arrSrcMauNam;
			$("#nam").css("color","red");
			$("#nu").css("color","black");
			LoadMau();
		});
		$("#nu").click(function(){
			arrSrcMau = arrSrcMauNu;
			$("#nu").css("color","red");
			$("#nam").css("color","black");
			LoadMau();
		});
	}
	function AddEvent(){
			if(arrTrangTri[0].status==0 && flag==0){
				$("#add-trangtri-1").show();
				$("#add-dichchuyen-1").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-1').bind('dragstop', function(event, ui) {
					arrTrangTri[0].y = ui.position.top;		
					arrTrangTri[0].x = ui.position.left;
				});
				$("#add-trangtri-1").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[0].height = ui.size.height;
						arrTrangTri[0].width = ui.size.width;
					
					}				
				});
				arrTrangTri[0].status = 1;
				arrTrangTri[0] .src = $("#add-trangtri-1").attr("src");
				
			}
			if(arrTrangTri[1].status == 0 && flag == 1){
				$("#add-trangtri-2").show();
				$("#add-dichchuyen-2").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-2').bind('dragstop', function(event, ui) {
					arrTrangTri[1].y = ui.position.top;		
					arrTrangTri[1].x = ui.position.left;
				});
				$("#add-trangtri-2").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[1].height = ui.size.height;
						arrTrangTri[1].width = ui.size.width;
					
					}				
				});
				arrTrangTri[1].status = 1;
				arrTrangTri[1] .src = $("#add-trangtri-2").attr("src");

			}
			if(arrTrangTri[2].status == 0 && flag == 2){
				$("#add-trangtri-3").show();
				$("#add-dichchuyen-3").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-3').bind('dragstop', function(event, ui) {
					arrTrangTri[2].y = ui.position.top;		
					arrTrangTri[2].x = ui.position.left;
				});
				$("#add-trangtri-3").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[2].height = ui.size.height;
						arrTrangTri[2].width = ui.size.width;
					
					}				
				});
				arrTrangTri[2].status = 1;
				arrTrangTri[2] .src = $("#add-trangtri-3").attr("src");
	
			}
			if(arrTrangTri[3].status == 0 && flag == 3){
				$("#add-trangtri-4").show();
				$("#add-dichchuyen-4").draggable({ containment: '#mauchinh-vungthem2', scroll: false });
				$('#add-dichchuyen-4').bind('dragstop', function(event, ui) {
					arrTrangTri[3].y = ui.position.top;		
					arrTrangTri[3].x = ui.position.left;
				});
				$("#add-trangtri-4").resizable({ 
					stop: function(event, ui) {
						arrTrangTri[3].height = ui.size.height;
						arrTrangTri[3].width = ui.size.width;
					
					}				
				});
				arrTrangTri[3].status = 1;
				arrTrangTri[3] .src = $("#add-trangtri-4").attr("src");

			}
	}